import React, { useEffect, useState, useRef } from 'react';
import "./ad.css"
import sc from "./img/shoucang.png"
import wen from "./img/wen.png"
import top from "./img/top.png"
import zixun from "./img/zixun.png"
function Ad() {
  const [showButton, setShowButton] = useState(false);
  const buttonRef = useRef(null);

  useEffect(() => {
    // 监听滚动事件  
    const handleScroll = () => {
      if (window.scrollY > 400) { // 当滚动超过400px时显示按钮  
        setShowButton(true);
      } else {
        setShowButton(false);
      }
    };

    window.addEventListener('scroll', handleScroll);

    // 清理函数，在组件卸载时移除事件监听器  
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth', // 平滑滚动（如果浏览器支持）  
    });
  };


  return (

    <div className='ads'>
      <ul>
        <li><img src={sc} alt="" /></li>
        <li className='svip'>
          <div>
            <img src="https://asset.eqh5.com/817a811946984ecba8d4c94a0179101f.png?imageMogr2/quality/80/format/webp/" alt="" />
          </div>

          <div className='vip'>
            全场会员免费用
          </div>
        </li>
        <li className='purchase'>
          <div>
            <img src="https://asset.eqh5.com/7c30790aa4aa418395776a86b125545a.png?imageMogr2/quality/80/format/webp/" alt="" />
          </div>

          <div className='consultation'>
            <img style={{ width: "260px", height: "330px" }} src={zixun} alt="" />
          </div>
        </li>

        <li className='wen'>
          <img className='zixun_img' src={wen} alt="" />
          <p>帮助</p>
        </li>
        <li className='wen'>
          <img src={wen} alt="" />
          <p>客服</p>
        </li>
        <li className='wen'>
          <img src={wen} alt="" />
          <p>意见</p>
        </li>
        <div >
          {showButton && (
            <div className='ontop'
              ref={buttonRef}
              onClick={scrollToTop}

            >
              <img src={top} alt="" />
              <p>置顶</p>

            </div>
          )}
        </div>

      </ul>
    </div>
  )
}

export default Ad
